<template>
    <div class="ticket_release">
        
        <!-- 发布团购主页 -->
        <div class="selIndex0" v-if="selIndex===0">
            <x-header title="发布代金券" class="blues" :left-options="{backText: '',preventGoBack:true}" @on-click-back="goBacks">
                <a slot="right" style="font-size:.3rem;color:#fff;" @click="goHelp">帮助中心</a>
            </x-header>
            <div class="content">
                <div class="upload_imgs" id="uploadImgs" @click.stop="autoClick">
                    <img v-if="lenImg===0" id="showImg" src="../../assets/images/groups/upload.jpg" />                              
                    <input type="file" multiple @change="onFileChange" style="display:none;" id="upfile">
                </div>
                <div class="sel_type">
                    <group>
                        <cell @click.native="goSelectType" title="品类" :value="value1" is-link value-align="left"></cell>
                        <cell @click.native="goAccounts" title="收款账户" :value="value2" is-link value-align="left"></cell>
                        <cell @click.native="goStores" title="门店" :value="value3" is-link value-align="left"></cell>
                    </group>
                    <div class="rates" style="border-bottom:.16rem solid #f0f0f0;">
                        <p>费率</p>
                        <img src="../../assets/images/groups/helps.jpg" alt="" />
                        <input type="text" placeholder="" v-model.trim="input0" />
                    </div>   
                    <div class="meal_quantity">
                        <div>
                            <h6>面值</h6>
                            <h6>{{ quantity }}</h6>
                        </div>
                        <checker v-model="demo1" default-item-class="demo1-item" selected-item-class="demo1-item-selected">
                            <checker-item value="1" @on-item-click="onItemClick">10</checker-item>
                            <checker-item value="2" @on-item-click="onItemClick">20</checker-item>
                            <checker-item value="3" @on-item-click="onItemClick">50</checker-item>
                            <checker-item value="4" @on-item-click="onItemClick">100</checker-item>
                            <checker-item value="5" @on-item-click="onItemClick">其他</checker-item>
                        </checker>
                    </div>  
                    <div class="group_prices meal_names">
                        <div>
                            <p>团购价</p>
                        </div>
                        <input type="text" placeholder="请填写" v-model.trim="input2" />
                        <img v-if="!input2" src="../../assets/images/groups/write.jpg" alt="" />
                    </div>  
                    <div class="meal_type">
                        <group>
                            <cell @click.native="mealType" title="用餐类型" :value="value6" is-link value-align="left"></cell>
                        </group>
                    </div>
                    <div class="consume_time">
                        <group>
                            <cell @click.native="goConsumeTime" title="消费时间" :value="value7" is-link value-align="left"></cell>
                        </group>
                    </div> 
                    <div class="detail_img">
                        <group>
                            <cell @click.native="detailImg" title="详情图" :value="value22" is-link value-align="left"></cell>
                            <img id="showImg2" @click.stop='autoClick2' />
                            <input type="file" @change="onFileChange2" style="display:none;" id="upfile2" @click.stop='autoClick2'>
                        </group>
                    </div>
                    <div class="end_time" v-if="value8">
                        <group>
                            <cell @click.native="goEndTime" title="截止日期" :value="'自上线之日起'+value8" is-link value-align="left"></cell>
                        </group>
                    </div>
                    <div class="end_time" v-if="!value8">
                        <group>
                            <cell @click.native="goEndTime" title="截止日期" :value="value8" is-link value-align="left"></cell>
                        </group>
                    </div> 
                    <div class="delay_date">
                        <group>
                          <x-switch title="到期后自动延迟30天" v-model="value9"></x-switch>
                        </group>
                    </div>   
                    <div class="unavailable">
                        <group>
                            <x-switch title="不可用券日期" v-model="value10"></x-switch>
                        </group>
                    </div>
                    <div class="unavailable_lists" v-if="value10">
                        <cell v-if="value11==='全部'" @click.native="everyweek" title="" value="每周不可用" is-link value-align="left"></cell>
                        <cell v-else @click.native="everyweek" title="" :value="value11" is-link value-align="left"></cell>
                        <cell v-if="value12==='全部'" @click.native="holiday" title="" value="节假日不可用" is-link value-align="left"></cell>
                        <cell v-else @click.native="holiday" title="" :value="value12" is-link value-align="left"></cell>
                        <cell @click.native="appoint" title="" :value="value13" is-link value-align="left"></cell>
                    </div>
                    <div class="purchase_notice">
                        <group>
                            <cell @click.native="goPurchaseNotice" title="购买须知" is-link value-align="left"></cell>
                        </group>
                    </div>        
                </div>
            </div>
            <!-- 选择用餐人数 -->
            <popup-picker style="display:none;" :show.sync="shows" @on-change="onChange1" confirm-text="确定" :data="list2" v-model="value4"></popup-picker>
            <!-- 用餐类型 -->
            <popup v-model="show3">
                <div class="all_types">
                    <div class="all_type">
                        <group>
                            <radio :selected-label-style="{color: '#10b9a5'}" :options="options" v-model="value6" @on-change="change3"></radio>
                        </group>
                    </div>
                    <div class="btn" @click="ensure3">确定</div>
                </div>
            </popup>
            <!-- 截止日期 -->
            <popup v-model="show4">
                <div class="all_times">
                    <div class="all_time">
                        <group>
                            <radio :selected-label-style="{color: '#10b9a5'}" :options="options2" v-model="value8" @on-change="change4"></radio>
                        </group>
                    </div>
                    <div class="btn" @click="ensure4">确定</div>
                </div>
            </popup>
            <!-- 每周不可用 -->
            <popup v-model="show11">
                <div class="all_times">
                    <div class="all_time">
                        <group>
                            <radio :selected-label-style="{color: '#10b9a5'}" :options="options11" v-model="value11" @on-change="change11"></radio>
                        </group>
                    </div>
                    <div class="btn" @click="ensure11">确定</div>
                </div>
            </popup>
            <!-- 节假日不可用 -->
            <popup v-model="show12">
                <div class="all_times">
                    <div class="all_time">
                        <group>
                            <radio :selected-label-style="{color: '#10b9a5'}" :options="options12" v-model="value12" @on-change="change12"></radio>
                        </group>
                    </div>
                    <div class="btn" @click="ensure12">确定</div>
                </div>
            </popup>
        </div>

        <!-- 选择团购品类 -->
        <div class="selIndex1" v-if="selIndex===1">
            <div class="select_type">
                <x-header title="选择团购品类" class="blues" :left-options="{backText: '',preventGoBack:true}" @on-click-back="selIndex=0">
                    <a slot="right" style="font-size:.3rem;color:#fff;" @click="goHelp">帮助中心</a>
                </x-header>
                <div class="content">
                    <div class="all_class">
                        <div class="first_class">
                            <ul v-for="(item,index) in allData">
                                <li :class="{sel1:index===selIndex1_1}" @click="selFirst(index)">{{ item.name }}</li>                       
                            </ul>
                        </div>
                        <div class="second_class">
                            <ul v-for="(item,index) in allData[selIndex1_1].childArr">
                                <li :class="{sel2:item.name===value1}" @click="selSecond(index)">{{ item.name }}</li>
                            </ul>
                        </div>              
                    </div>          
                </div>
            </div>
        </div>

        <!-- 收款账户 -->
        <div class="selIndex2" v-if="selIndex===2">
            <div class="accounts">
                <x-header title="选择账户" class="blues" :left-options="{backText: '',preventGoBack:true}" @on-click-back="selIndex=0">
                    <a slot="right" style="font-size:.3rem;color:#fff;" @click="goHelp">帮助中心</a>
                </x-header>
                <div class="content">
                    <div class="account_tab">
                        <tab>
                            <tab-item :selected="selectIndex2_1===0" @on-item-click="onItemClick2_1">可用账户</tab-item>
                            <tab-item :selected="selectIndex2_1===1" @on-item-click="onItemClick2_1">不可用账户</tab-item>                 
                        </tab>
                    </div>
                    <div class="content1" v-if="selectIndex2_1===0">
                        <div class="data_list">
                            <div class="names">
                                <p>广客缘三及第</p>
                                <check-icon :value.sync="demo2_1"></check-icon>
                            </div>  
                            <h6>sjDDCY0592058048</h6>
                            <div class="bank_name name1">
                                <p>开户行：</p>
                                <p>中国农业银行&nbsp;中国农业银行深圳天安支行</p>
                            </div>
                            <div class="user_name name1">
                                <p>开户名：</p>
                                <p>李广元</p>
                            </div>
                            <div class="bank_card name1">
                                <p>银行卡：</p>
                                <p>{{ account_num | filters2_1 }}</p>
                            </div>
                            <div class="pay_way name1">
                                <p>付款方式：</p>
                                <p>7天自提+每4周自动付</p>
                            </div>
                        </div>              
                        <button @click="goRelease2_1">完成</button>
                    </div>
                    <div class="content2" v-if="selectIndex2_1===1">
                        <div class="no_data">暂无数据</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 门店 -->
        <div class="selIndex3" v-if="selIndex===3">
            <div class="stores">
                <x-header title="选择门店" class="blues" :left-options="{backText: '',preventGoBack:true}" @on-click-back="selIndex=0">
                    <a slot="right" style="font-size:.3rem;color:#fff;" @click="goHelp">帮助中心</a>
                </x-header>
                <div class="content">
                    <h6>选择门店</h6>
                    <div class="data_lists">
                        <check-icon :value.sync="demo3_1"></check-icon>
                        <div class="store_info">
                            <h6>{{ storeName }}</h6>
                            <p>地址：福田区泰然四路205栋东边</p>
                        </div>
                    </div>
                    <div class="no_more">没有更多了...</div>
                    <button @click="goRelease3_1">完成</button>
                </div>
            </div>
        </div>

        <!-- 消费时间 -->
        <div class="selIndex5" v-if="selIndex===5">
            <div class="consume_time">
                <x-header title="消费时间" class="blues" :left-options="{backText: '',preventGoBack:true}" @on-click-back="selIndex=0">
                    <a slot="right" style="font-size:.3rem;color:#fff;" @click="goHelp">帮助中心</a>
                </x-header>
                <div class="content">
                    <div class="check_list">
                        <checklist :options="commonList5_1" v-model="radioValue5_1" :max="1"></checklist>
                    </div>
                    <div v-if="radioValue5_1[0]==='部分时间可用'" class="date_times">
                        <div class="date_time" v-for="(item,index) in allData5_1">
                            <img v-if="index===0" style="visibility:hidden;" src="../../assets/images/groups/del.jpg" alt="" />
                            <img v-if="index>0" @click="dels5_1" src="../../assets/images/groups/del.jpg" alt="" />
                            <datetime v-model="value5_1" format="HH:mm"></datetime>
                            <p>至</p>
                            <datetime v-model="value5_2" format="HH:mm"></datetime>
                        </div>
                        <div class="adds" @click="adds5_1">
                            <img src="../../assets/images/groups/add.jpg" alt="" />
                            <p>添加</p>
                        </div>
                        <div class="errors" v-if="isError5_1">
                            <img src="../../assets/images/groups/error.jpg" alt="" />
                            <p>可用时间有重叠，请仔细检查</p>
                        </div>
                    </div>
                    <button @click="goRelease5_1">保存</button>
                </div>
            </div>
        </div>

        <!-- 指定日期不可用 -->
        <div class="selIndex6" v-if="selIndex===6">
            <div class="appoint_date">
                <x-header title="指定日期不可用" class="blues" :left-options="{backText: '',preventGoBack:true}" @on-click-back="selIndex=0">
                    <a slot="right" style="font-size:.3rem;color:#fff;" @click="goHelp">帮助中心</a>
                </x-header>
                <div class="content">
                    <div class="date_times">
                        <div class="date_time" v-for="(item,index) in allData6_1">
                            <img v-if="index===0" style="visibility:hidden;" src="../../assets/images/groups/del.jpg" alt="" />
                            <img v-if="index>0" @click="dels6_1" src="../../assets/images/groups/del.jpg" alt="" />
                            <datetime style="border:1px solid #d8d8d8;padding:.16rem .44rem;border-radius:.05rem;" v-model="value6_1"></datetime>
                            <p style="margin:0 .38rem;">至</p>
                            <datetime style="border:1px solid #d8d8d8;padding:.16rem .44rem;border-radius:.05rem;" v-model="value6_2"></datetime>
                        </div>
                        <div class="adds" @click="adds6_1">
                            <img src="../../assets/images/groups/add.jpg" alt="" />
                            <p>添加</p>
                        </div>
                    </div>
                </div>
                <button @click="goRelease6_1">保存</button>
            </div>
        </div>

        <!-- 购买须知 -->
        <div class="selIndex7" v-if="selIndex===7">
            <div class="purchase_notice1">
                <x-header title="购买须知" class="blues" :left-options="{backText: '',preventGoBack:true}" @on-click-back="selIndex=0">
                    <a slot="right" style="font-size:.3rem;color:#fff;" @click="goHelp">帮助中心</a>
                </x-header>
                <div class="content">
                    <div class="switchs">
                        <group title=" ">
                            <x-switch title="是否支持急速退" v-model="switch7_1"></x-switch>
                            <x-switch title="是否支持WiFi" v-model="switch7_2"></x-switch>
                            <x-switch title="是否展示发票" v-model="switch7_3"></x-switch>
                            <x-switch title="全场通用" v-model="switch7_6"></x-switch>
                            <x-switch title="叠加使用" v-model="switch7_7"></x-switch>
                            <x-switch title="支持使用包间" v-model="switch7_8"></x-switch>
                            <x-switch title="支持堂食外带" v-model="switch7_4"></x-switch>
                            <x-switch title="支持免费打包" v-model="switch7_5"></x-switch>
                            <cell @click.native="show7_1=true" style="text-align:left;white-space:nowrap;" title="是否可享受店内其他优惠" :value="value7_1" is-link value-align="right"></cell>
                        </group>
                    </div>
                    <div class="is_order">
                        <h6>是否预约</h6>
                        <div class="is_order_info">
                            <div style="display:flex;align-items:center;;padding:.24rem .1rem;border-bottom:1px solid #e1e1e1;">
                                <check-icon @click.native="sel7_1" :value.sync="demo7_1"></check-icon>                      
                                <span style="font-size:.29rem;color:#131313;">无需预约，消费高峰时可能需要等位</span>
                            </div>  
                            <div style="padding:.14rem .1rem;border-bottom:1px solid #e1e1e1;">
                                <check-icon @click.native="sel7_2" :value.sync="demo7_2"></check-icon>                                                  
                                <span style="font-size:.29rem;color:#131313;">其他:</span>
                                <input style="border:none;width:2.8rem;height:.55rem;border:1px solid #cecece;font-size:.3rem;color:#131313;padding-left:.2rem;" type="text" v-model.trim="input7_1"/>
                            </div>                  
                        </div>
                    </div>
                    <div class="sale_platform">
                        <group title=" ">
                            <cell @click.native="show7_2=true" style="text-align:left;" title="售卖平台" :value="value7_2" is-link value-align="right"></cell>
                        </group>
                    </div>
                    <div class="is_order">
                        <h6>美团最多卖几张</h6>
                        <div class="is_order_info">
                            <div style="display:flex;align-items:center;;padding:.24rem .1rem;border-bottom:1px solid #e1e1e1;">
                                <check-icon @click.native="sel7_3" :value.sync="demo7_3"></check-icon>                      
                                <span style="font-size:.29rem;color:#131313;">不限</span>
                            </div>  
                            <div style="padding:.14rem .1rem;border-bottom:1px solid #e1e1e1;">
                                <check-icon @click.native="sel7_4" :value.sync="demo7_4"></check-icon>                                                  
                                <span style="font-size:.29rem;color:#131313;">最多想卖</span>
                                <input style="border:none;width:1rem;height:.55rem;border:1px solid #cecece;font-size:.3rem;color:#131313;padding-left:.2rem;" type="text" v-model.trim="input7_2"/>
                                <span style="font-size:.29rem;color:#131313;">张</span>
                            </div>                  
                        </div>
                    </div>
                    <div class="is_order">
                        <h6>点评最多卖几张</h6>
                        <div class="is_order_info">
                            <div style="display:flex;align-items:center;;padding:.24rem .1rem;border-bottom:1px solid #e1e1e1;">
                                <check-icon @click.native="sel7_5" :value.sync="demo7_5"></check-icon>                      
                                <span style="font-size:.29rem;color:#131313;">不限</span>
                            </div>  
                            <div style="padding:.14rem .1rem;border-bottom:1px solid #e1e1e1;">
                                <check-icon @click.native="sel7_6" :value.sync="demo7_6"></check-icon>                                                  
                                <span style="font-size:.29rem;color:#131313;">最多想卖</span>
                                <input style="border:none;width:1rem;height:.55rem;border:1px solid #cecece;font-size:.3rem;color:#131313;padding-left:.2rem;" type="text" v-model.trim="input7_3"/>
                                <span style="font-size:.29rem;color:#131313;">张</span>
                            </div>                  
                        </div>
                    </div>
                    <div class="is_order">
                        <h6>每人最多买几张</h6>
                        <div class="is_order_info">
                            <div style="display:flex;align-items:center;;padding:.24rem .1rem;border-bottom:1px solid #e1e1e1;">
                                <check-icon @click.native="sel7_7" :value.sync="demo7_7"></check-icon>                      
                                <span style="font-size:.29rem;color:#131313;">不限</span>
                            </div>  
                            <div style="padding:.14rem .1rem;border-bottom:1px solid #e1e1e1;">
                                <check-icon @click.native="sel7_8" :value.sync="demo7_8"></check-icon>                                                  
                                <span style="font-size:.29rem;color:#131313;">限，每人限购</span>
                                <input style="border:none;width:1rem;height:.55rem;border:1px solid #cecece;font-size:.3rem;color:#131313;padding-left:.2rem;" type="text" v-model.trim="input7_4"/>
                                <span style="font-size:.29rem;color:#131313;">张</span>
                            </div>                  
                        </div>
                    </div>
                    <div class="is_order">
                        <h6>每人每次最多可用几张</h6>
                        <div class="is_order_info">
                            <div style="display:flex;align-items:center;;padding:.24rem .1rem;border-bottom:1px solid #e1e1e1;">
                                <check-icon @click.native="sel7_9" :value.sync="demo7_9"></check-icon>                      
                                <span style="font-size:.29rem;color:#131313;">不限</span>
                            </div>  
                            <div style="padding:.14rem .1rem;border-bottom:1px solid #e1e1e1;">
                                <check-icon @click.native="sel7_10" :value.sync="demo7_10"></check-icon>                                                    
                                <span style="font-size:.29rem;color:#131313;">限，每人限用</span>
                                <input style="border:none;width:1rem;height:.55rem;border:1px solid #cecece;font-size:.3rem;color:#131313;padding-left:.2rem;" type="text" v-model.trim="input7_5"/>
                                <span style="font-size:.29rem;color:#131313;">张券</span>
                            </div>                  
                        </div>
                    </div>
                    <div class="is_order">
                        <h6>每张券最多可几人使用</h6>
                        <div class="is_order_info">
                            <div style="display:flex;align-items:center;;padding:.24rem .1rem;border-bottom:1px solid #e1e1e1;">
                                <check-icon @click.native="sel7_11" :value.sync="demo7_11"></check-icon>                        
                                <span style="font-size:.29rem;color:#131313;">不限</span>
                            </div>  
                            <div style="padding:.14rem .1rem;border-bottom:1px solid #e1e1e1;">
                                <check-icon @click.native="sel7_12" :value.sync="demo7_12"></check-icon>                                                    
                                <span style="font-size:.29rem;color:#131313;">限，每张限</span>
                                <input style="border:none;width:1rem;height:.55rem;border:1px solid #cecece;font-size:.3rem;color:#131313;padding-left:.2rem;" type="text" v-model.trim="input7_6"/>
                                <span style="font-size:.29rem;color:#131313;">人使用，身高</span>
                                <input style="border:none;width:1rem;height:.55rem;border:1px solid #cecece;font-size:.3rem;color:#131313;padding-left:.2rem;" type="text" v-model.trim="input7_7"/>
                                <p style="font-size:.29rem;color:#131313;padding: .3rem .18rem .1rem .18rem;">米以上儿童计入人数</p>
                            </div>                  
                        </div>
                    </div>
                </div>
                <footer>
                    <button @click="save7_1">保存</button>
                </footer>
                <!-- 是否享受其他优惠 -->
                <popup v-model="show7_1">
                    <div class="all_types">
                        <div class="all_type">
                            <group>
                                <radio :selected-label-style="{color: '#10b9a5'}" :options="options7_1" v-model="value7_1" @on-change="change7_1"></radio>
                            </group>
                        </div>
                        <div class="btn" @click="ensure7_1">确定</div>
                    </div>
                </popup>
                <!-- 售卖平台 -->
                <popup v-model="show7_2">
                    <div class="all_types">
                        <div class="all_type">
                            <group>
                                <radio :selected-label-style="{color: '#10b9a5'}" :options="options7_2" v-model="value7_2" @on-change="change7_2"></radio>
                            </group>
                        </div>
                        <div class="btn" @click="ensure7_2">确定</div>
                    </div>
                </popup>
            </div>
        </div>

    </div>
</template>

<script>
    import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie'
    import { XHeader, Datetime, Group, XButton, Alert, Popup, XInput, Checker, CheckerItem, Picker, Cell, PopupPicker, Radio, XSwitch, CheckIcon, Tab, TabItem, XNumber, Checklist } from 'vux';
    export default {
        name: 'ticket_release',
        data() {
            let arr = [];
            for(let i = 1;i <= 12;i++){
                arr.push(i + '个月');
            }
            let arr2 = [];
            arr2.push('全部');
            arr2.push('元旦（2017-12-30 - 2018-01-01）');
            arr2.push('情人节（2018-02-14）');
            arr2.push('春节（2018-02-15 - 2018-02-21）');
            arr2.push('元宵节（2018-03-02）');
            arr2.push('清明节（2018-04-05 - 2018-04-07）');
            arr2.push('中秋节（2018-09-22 2018-09-24）');
            arr2.push('国庆节（2018-10-01 2018-10-07）');
            arr2.push('重阳节（2018-10-17）');
            arr2.push('万圣节（2018-10-31）');
            arr2.push('感恩节（2018-11-22）');
            arr2.push('圣诞节（2018-12-24 - 2018-12-25）');
            return {
                selIndex: 0,
                lenImg: 0, //几张图片
                value1: '', //品类
                selIndex1_1: 0, //选中的一级分类索引
                selIndex1_2: 0, //选中的二级分类索引                
                allData: [{
                    id: 1,
                    name: '粤菜',
                    childArr:[
                    {
                        id: 101,
                        name: '粤菜一',
                    },{
                        id: 102,
                        name: '粤菜二',
                    },{
                        id: 103,
                        name: '粤菜三',
                    }]
                }, {
                    id: 2,
                    name: '湘菜',
                    childArr:[
                    {
                        id: 201,
                        name: '湘菜一',
                    },{
                        id: 202,
                        name: '湘菜二',
                    },{
                        id: 203,
                        name: '湘菜三',
                    }]
                }],
                value2: '', //收款账户
                selectIndex2_1: 0, //0-可用账户  1-不可用账户
                demo2_1: false,         
                account_num: '6217005825846254862', //银行卡
                value3: '', //门店
                demo3_1: false,
                storeName: '广客缘客家三及第',
                input0: '', //费率
                demo1: '1', 
                quantity: '10元', //面值文字
                flags: false,
                value4: [], //选择的用餐人数
                list2: [
                [200,300,400,500,600,700,800,900,1000],                
                ],
                shows: false,
                input2: '', //团购价
                value6: '', //用餐类型
                value_6: '',
                show3: false, //是否显示用餐类型
                options: ['全部', '早餐', '午餐', '晚餐', '下午茶', '夜宵'],
                value7: '', //消费时间
                commonList5_1: ['24小时可用', '部分时间可用'],
                radioValue5_1: ['24小时可用'],
                allData5_1: [1],
                value5_1: '09:00',
                value5_2: '21:00',
                isError5_1: false,
                value22: '', //详情图
                imgU2: '', //详情图路径
                value8: '', //截止日期
                value_8: '',
                show4: false, //是否显示截止日期
                options2: arr,
                value9: false, //是否打开延期30天
                value10: false, //是否打开不可用券日期
                value11: '全部', //每周不可用
                value_11: '',
                value12: '全部', //节假日不可用
                value_12: '',   
                value13: '指定日期不可用', //指定日期不可用
                show11: false, //是否显示每周不可用
                show12: false, //是否显示节假日不可用             
                options11: ['全部','周一','周二','周三','周四','周五','周六','周日'],
                options12: arr2,
                allData6_1: [1],
                value6_1: '',
                value6_2: '',
                //购买须知
                switch7_1: false,
                switch7_2: false,
                switch7_3: false,
                switch7_4: false,
                switch7_5: false,
                switch7_6: false,
                switch7_7: false,
                switch7_8: false,
                value7_1: '不可以同时享有',
                value7_1_1: '',
                show7_1: false, //是否显示其他优惠
                demo7_1: true,
                demo7_2: false,
                options7_1: ['不可以同时享有','可以同时享有'],               
                input7_1: '' ,//其他
                show7_2: false, //是否显示售卖平台
                value7_2: '美团+点评',
                value7_2_2: '',
                options7_2: ['美团','点评','美团+点评'],
                demo7_3: true,
                demo7_4: false,
                input7_2: '', //美团张数
                demo7_5: true,
                demo7_6: false,
                input7_3: '', //点评张数
                demo7_7: true,
                demo7_8: false,
                input7_4: '', //每人最多买几张
                demo7_9: true,
                demo7_10: false,
                input7_5: '', //每人每次最多买几张
                demo7_11: true,
                demo7_12: false,
                input7_6: '', //限用多少人
                input7_7: '', //身高多少米
            }
        },
        components: {
            XHeader,
            Datetime,
            Group,
            XButton,
            Alert,
            Popup,
            XInput,
            Checker,
            CheckerItem,
            Picker,
            Cell,
            PopupPicker,
            Radio,
            XSwitch,
            CheckIcon,
            Tab,
            TabItem,
            XNumber,
            Checklist
        },
        computed: {

        },
        created() {
            let dd = new Date();
            this.value6_1 = this.formats(dd.getTime());
            let dd2 = new Date();
            dd2.setDate(dd2.getDate() + 7);
            this.value6_2 = this.formats(dd2.getTime());
        },
        methods: {
            //返回
            goBacks(){
                let self = this;
                this.$vux.confirm.show({
                    content: '代金券发布还未保存，是否确定退出?',
                    confirmText: '退出',
                    onConfirm() {
                        self.$router.go(-1);
                    }
                })
            },
            //帮助中心
            goHelp() {
                let self = this;
                this.$vux.confirm.show({
                    content: '前往帮助中心，是否确定退出?',
                    confirmText: '退出',
                    onConfirm() {
                        self.$router.push('/customerService');
                    }
                })              
            },
            //自动点击
            autoClick() {               
                document.getElementById("upfile").click();              
            },          
            //上传文件
            onFileChange($event) {                                      
                this.lenImg += $event.target.files.length;                                                                          
                if(this.lenImg === 0) {
                    return;
                }
                if(this.lenImg > 5){
                    this.$vux.alert.show({
                        title: '提示',
                        content: '最多上传5张图片'
                    })      
                    var ps = document.getElementsByClassName('showImg2');
                    for(let i=0;i<ps.length;i++){
                        ps[i].style.display = 'none';
                    }                           
                    this.lenImg = 0;
                    return;                 
                }                               
                let fileArr = $event.target.files;              
                for(var i=0;i<fileArr.length;i++){
                    var file=fileArr[i];    
                    var reader = new FileReader();                                                                 
                    reader.onload = function (e) {  
                        console.log(e);
                        var img2 = document.createElement('img');   
                        img2.setAttribute('src',e.target.result);                                                              
                        img2.setAttribute('class','showImg2');                                                             
                        img2.setAttribute('style','width:1.54rem;height:1.54rem');                                                             
                        document.getElementById('uploadImgs').appendChild(img2);                                                                                          
                    }                   
                    reader.readAsDataURL(file);
                }
            },
            //选择代金券分类
            goSelectType() {                
                this.selIndex = 1;
            },
            //选择一级分类
            selFirst(id) {
                this.selIndex1_1 = id;
            },
            //选择二级分类
            selSecond(id) {
                this.selIndex1_2 = +id;             
                let val = this.allData[this.selIndex1_1].childArr[this.selIndex1_2];                
                this.value1 = val.name;     
                this.selIndex = 0;                          
            },
            //收款账户
            goAccounts() {                
                this.selIndex = 2;
            },
            //切换
            onItemClick2_1(val) {
                this.selectIndex2_1 = val;
            },      
            //选择账户完成    
            goRelease2_1(){
                if(!this.demo2_1){
                    this.$vux.alert.show({
                        title: '提示',
                        content: '请选择账户'
                    })
                    return false;
                }
                this.value2 = this.account_num;
                this.selIndex = 0;
            },
            //门店
            goStores() {                
                this.selIndex = 3;
            },
            //门店完成
            goRelease3_1(){
                if(!this.demo3_1){
                    this.$vux.alert.show({
                        title: '提示',
                        content: '请选择门店'
                    });
                    return false;
                }
                this.value3 = this.storeName;
                this.selIndex = 0;
            },
            //切换用餐人数
            onItemClick(value) {
                switch(value) {
                    case '1':
                    this.flags = false;
                    this.quantity = this.quantity === '10元' ? '' : '10元';
                    break;
                    case '2':
                    this.flags = false;
                    this.quantity = this.quantity === '20元' ? '' : '20元';
                    break;
                    case '3':
                    this.flags = false;
                    this.quantity = this.quantity === '50元' ? '' : '50元';
                    break;
                    case '4':
                    this.flags = false;
                    this.quantity = this.quantity === '100元' ? '' : '100元';
                    break;
                    case '5':
                    this.flags = !this.flags;
                    if(this.flags) {
                        this.shows = true;
                    } else {
                        this.quantity = '';
                        this.shows = false;
                    }
                    break;
                }
            },
            //选择自定义人数
            onChange1() {                
                this.quantity = this.value4[0] + '元';
            },
            //用餐类型
            mealType() {
                this.show3 = true;
            },
            //选择用餐类型
            change3(value) {
                this.value_6 = value;
            },
            //确定
            ensure3() {
                this.value6 = this.value_6;
                this.show3 = false;
            },
            //消费时间
            goConsumeTime() {                
                this.selIndex = 5;
            },  
            dels5_1() {
                this.allData5_1.pop();
            },
            adds5_1() {
                this.allData5_1.push(1);
            },
            //消费时间保存
            goRelease5_1(){
                this.value7 = this.radioValue5_1[0];
                if(this.radioValue5_1[0] === '部分时间可用'){
                    this.value7 = this.value5_1 + '-' + this.value5_2;
                }               
                this.selIndex = 0;
            },
            //详情图
            detailImg(){                
                this.autoClick2();
            },
            //自动点击
            autoClick2() {
                document.getElementById("upfile2").click();
            },
            //上传文件
            onFileChange2($event) {
                //console.log($event);
                if($event.target.files.length == 0) {
                    return;
                }
                //图片预览fileReader
                let fr = new FileReader();
                let that = this;
                fr.readAsDataURL($event.target.files[0]);
                let sImg = document.getElementById('showImg2');
                fr.onload = function(evt) {
                    sImg.style.visibility = 'visible';
                    sImg.src = evt.target.result;
                    that.imgU2 = evt.target.result.split(',')[1];                    
                }
            },
            //截止日期
            goEndTime() {
                this.show4 = true;
            },
            //选择截止日期
            change4(value) {
                this.value_8 = value;
            },
            //确定
            ensure4() {
                this.value8 = this.value_8;
                this.show4 = false;
            },
            //每周不可用
            everyweek(){
                this.show11 = true;
            },
            //节假日不可用
            holiday(){          
                this.show12 = true;
            },  
            //指定日期不可用
            appoint(){                
                this.selIndex = 6;
            },
            change11(value){
                this.value_11 = value;
            },
            change12(value){
                this.value_12 = value;
            },
            ensure11() {
                this.value11 = this.value_11;
                this.show11 = false;
            },
            ensure12() {
                this.value12 = this.value_12;
                this.show12 = false;
            },
            dels6_1() {
                this.allData6_1.pop();
            },
            adds6_1() {
                this.allData6_1.push(1);
            },          
            //指定日期不可用保存
            goRelease6_1(){
                this.value13 = this.value6_1 + ' - ' + this.value6_2;
                this.selIndex = 0;              
            },
            //购买须知
            goPurchaseNotice(){                
                this.selIndex = 7;
            },
            /* 购买须知 */
            change7_1(value) {
                this.value7_1_1 = value;
            },
            ensure7_1() {
                this.value7_1 = this.value7_1_1;
                this.show7_1 = false;
            },
            sel7_1(){
                this.demo7_1 ? this.demo7_2=false : this.demo7_2=true;
            },
            sel7_2(){
                this.demo7_2 ? this.demo7_1=false : this.demo7_1=true;
            },
            change7_2(value) {
                this.value7_2_2 = value;
            },
            ensure7_2() {
                this.value7_2 = this.value7_2_2;
                this.show7_2 = false;
            },
            sel7_3(){
                this.demo7_3 ? this.demo7_4=false : this.demo7_4=true;
            },
            sel7_4(){
                this.demo7_4 ? this.demo7_3=false : this.demo7_3=true;
            },
            sel7_5(){
                this.demo7_5 ? this.demo7_6=false : this.demo7_6=true;
            },
            sel7_6(){
                this.demo7_6 ? this.demo7_5=false : this.demo7_5=true;
            },
            sel7_7(){
                this.demo7_7 ? this.demo7_8=false : this.demo7_8=true;
            },
            sel7_8(){
                this.demo7_8 ? this.demo7_7=false : this.demo7_7=true;
            },
            sel7_9(){
                this.demo7_9 ? this.demo7_10=false : this.demo7_10=true;
            },
            sel7_10(){
                this.demo7_10 ? this.demo7_9=false : this.demo7_9=true;
            },
            sel7_11(){
                this.demo7_11 ? this.demo7_12=false : this.demo7_12=true;
            },
            sel7_12(){
                this.demo7_12 ? this.demo7_11=false : this.demo7_11=true;
            },
            //购买须知保存
            save7_1(){
                this.selIndex = 0;
            },
            /* 购买须知 */
            formats(val){
                let y = new Date(val).getFullYear();
                let m = new Date(val).getMonth() + 1 >= 10 ? new Date(val).getMonth() + 1 : '0' + (new Date(val).getMonth() + 1);
                let d = new Date(val).getDate() >= 10 ? new Date(val).getDate() : '0' + new Date(val).getDate();
                return y + "-" + m + "-" + d;
            },
        },
        filters: {
            //过滤银行卡
            filters2_1(val){
                let reg1 = /(\d{6})\d{9}(\d{4})/;
                return val.replace(reg1,'$1*********$2');
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
    /* 用餐人数 */
    .demo1-item {
        padding: .1rem .34rem;
        border: 1px solid #e0e0e0;
        color: #08b6a2;
        margin-top: .34rem;
    }
    .demo1-item-selected {
        border: 1px solid #08b6a2;
        background: url('../../assets/images/groups/selected.jpg') no-repeat bottom right;
        background-size: .38rem .29rem;
    }
    /* 用餐类型 */
    .all_types,.all_times {
        width: 7.5rem;
        background: #fff;
        text-align: left;           
        .btn {
            height: 1rem;
            font-size: .3rem;
            color: #22beac;
            border-top: .16rem solid #909090;
            text-align: center;
            line-height: .84rem;
        }
    }
    .all_times{
        height: 4.8rem;
        overflow: auto;
    }
    .ticket_release {
        .selIndex0{
            .content{
                background: #fff;
                padding-top: .24rem;
                .upload_imgs {
                    width: 6.9rem;  
                    min-height: 3.8rem; 
                    padding: 1rem 0;                        
                    margin: 0 auto;
                    border: 1px dashed #b3b3b3;
                    display: flex;
                    flex-flow: wrap;                
                    align-items: center;    
                    position: relative;         
                    #showImg {                  
                        width: 1.54rem;
                        height: 1.54rem;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%,-50%);
                    }
                }
                .detail_img{
                    position: relative;
                    border-top:.16rem solid #f0f0f0;
                    #showImg2{                        
                        height: 90%;
                        position: absolute;
                        left: 40%;
                        top: 50%;
                        transform: translateY(-50%);
                        z-index: 99;
                        visibility: hidden;
                    }
                }
                .sel_type {
                    text-align: left;
                    .rates {
                        padding: 10px 15px;
                        display: flex;
                        align-items: center;
                        p {
                            font-size: .34rem;
                            color: #131313;
                        }
                        img {
                            width: .31rem;
                            height: .32rem;
                            margin-left: .08rem;
                        }
                        input{
                            border: none;
                            font-size: .34rem;
                            color: #131313;
                            width: 55%;                     
                            margin-left: .54rem;                        
                        }
                    }
                    .meal_names {
                        border-top: .16rem solid #f0f0f0;
                        padding: 10px 15px;
                        display: flex;
                        align-items: center;
                        border-bottom: 1px solid #f0f0f0;
                        >div {
                            display: flex;
                            align-items: center;
                            width: 1.8rem;
                            p {
                                font-size: .34rem;
                                color: #131313;
                                white-space: nowrap;
                            }
                            img {
                                width: .31rem;
                                height: .32rem;
                                margin-left: .08rem;
                            }
                        }
                        input {
                            width: 68%;
                            border: none;
                            font-size: .34rem;
                            color: #131313;
                        }
                        >img {
                            width: .22rem;
                            height: .22rem;
                        }
                    }
                    .meal_quantity {
                        padding: 10px 15px;
                        border-bottom: 1px solid #f0f0f0;
                        div {
                            display: flex;
                            h6 {
                                font-size: .34rem;
                                color: #131313;
                                font-weight: 400;
                            }
                            h6:nth-of-type(2) {
                                margin-left: .48rem;
                            }
                        }
                    }
                    .meal_content,
                    .meal_type,
                    .consume_time,
                    .end_time {
                        border-bottom: 1px solid #f0f0f0;
                    }                    
                    .group_prices {
                        border-top: none;
                    }
                    .unavailable_lists{

                    }
                    .foot_button{
                        background: #f0f0f0;
                        display: flex;
                        justify-content: center;
                        padding: .28rem .26rem .1rem .26rem;
                        button{
                            border: none;
                            border-radius: .05rem;
                            width: 6.9rem;
                            height: .72rem;
                            line-height: .72rem;
                            background: #ff9d3c;
                            font-size: .32rem;
                            color: #fff;
                        }
                    }
                }
            }
        }
        .selIndex1{
            .select_type {
                .content {
                    text-align: left;
                    .all_class {
                        display: flex;
                        .first_class {
                            width: 3.2rem;
                            background: #f0f0f0;
                            ul {
                                font-size: .28rem;
                                color: #363636;
                                list-style: none;
                                li {
                                    height: .8rem;
                                    line-height: .8rem;
                                    padding-left: .26rem;
                                }
                            }
                            .sel1 {
                                background: #fff;
                                color: #41c8b8;
                            }
                        }
                        .second_class {
                            width: 4.3rem;
                            background: #fff;
                            ul {
                                font-size: .28rem;
                                color: #3f3f3f;
                                list-style: none;
                                li {
                                    height: .8rem;
                                    line-height: .8rem;
                                    border-bottom: 1px solid #f2f2f2;
                                    padding-left: .28rem;
                                }
                            }
                            .sel2 {
                                background: #40E0D0;
                            }
                        }
                    }
                }
            }
        }
        .selIndex2{
            .accounts {
                .content1 {
                    background: #fff;
                    text-align: left;
                    .data_list {
                        margin-top: .18rem;
                        padding: .26rem;
                        border-bottom: 1px solid #f0f0f1;
                        .names {
                            display: flex;
                            justify-content: space-between;
                            p {
                                font-size: .32rem;
                                color: #1f1f1f;
                            }
                        }
                        h6 {
                            font-size: .22rem;
                            color: #0a0a0a;
                            font-weight: 400;
                            margin: .18rem 0 .2rem 0;
                        }
                        .name1 {
                            display: flex;
                            p {
                                font-size: .26rem;
                                color: #545454;
                                margin-top: .14rem;
                            }
                            p:nth-of-type(1) {
                                width: 1.6rem;                  
                            }
                        }
                    }
                    button{
                        border: none;
                        border-radius: .05rem;
                        position: fixed;
                        bottom: .1rem;
                        left: 50%;
                        transform: translateX(-50%);
                        width: 6.9rem;
                        height: .72rem;
                        line-height: .72rem;
                        text-align: center;
                        background: #ff9d3c;
                        font-size: .32rem;
                        color: #fff;
                    }
                }
                .content2 {
                    .no_data {
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                        color: #A9A9A9;
                    }
                }               
            }
        }
        .selIndex3{
            .stores {
                .content {
                    text-align: left;           
                    >h6{
                        font-size: .24rem;
                        color: #535353;
                        font-weight: 400;
                        background: #ccc;
                        padding: .1rem .26rem;
                    }
                    .data_lists{
                        display: flex;
                        align-items: center;
                        padding: .24rem .28rem;
                        background: #fff;
                        .store_info{
                            margin-left: .28rem;
                            h6{
                                font-size: .28rem;
                                color: #484848;
                                font-weight: 400;
                                margin-bottom: .2rem;
                            }
                            p{
                                font-size: .27rem;
                                color: #898989;
                            }
                        }
                    }
                    .no_more{
                        text-align: center;
                        font-size: .22rem;
                        color: #919191;
                        padding: .22rem 0;
                    }
                    button{
                        border: none;
                        border-radius: .05rem;
                        position: fixed;
                        bottom: .1rem;
                        left: 50%;
                        transform: translateX(-50%);
                        width: 6.9rem;
                        height: .72rem;
                        line-height: .72rem;
                        text-align: center;
                        background: #ff9d3c;
                        font-size: .32rem;
                        color: #fff;
                    }
                }
            }
        }
        .selIndex5{
            .consume_time {
                .content {
                    background: #fff;
                    .check_list {
                        text-align: left;
                        border-bottom: 1px solid #D9D9D9;
                    }
                    .date_time {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-bottom: 1px solid #D9D9D9;
                        padding: .14rem 0;
                        a{
                            text-decoration: none!important;
                        }
                        img {
                            width: .41rem;
                            height: .4rem;
                        }
                    }
                    .adds {
                        display: flex;
                        align-items: center;
                        padding: .18rem .64rem;
                        img {
                            width: .41rem;
                            height: .41rem;
                            margin-right: .34rem;
                        }
                        p{
                            font-size: .3rem;
                            color: #14baa6;
                        }
                    }
                    .errors{
                        display: flex;
                        align-items: center;
                        background: #efefef;
                        padding: .08rem .28rem;
                        img {
                            width: .28rem;
                            height: .28rem;
                            margin-right: .34rem;
                        }
                        p{
                            font-size: .24rem;
                            color: #f64406;
                        }
                    }
                    button {
                        border: none;
                        border-radius: .05rem;
                        width: 6.9rem;
                        height: .72rem;
                        position: fixed;
                        left: 50%;
                        transform: translateX(-50%);
                        bottom: .1rem;
                        background: #ff9d3c;
                        font-size: .3rem;
                        color: #fff;
                    }
                }
            }
        }
        .selIndex6{
            .appoint_date {
                .content {
                    background: #fff;
                    .date_time {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-bottom: 1px solid #D9D9D9;
                        padding: .14rem 0;
                        a{
                            text-decoration: none!important;
                        }
                        img {
                            width: .41rem;
                            height: .4rem;
                            margin-right: .2rem;
                        }
                    }
                    .adds {
                        display: flex;
                        align-items: center;
                        padding: .18rem .56rem;
                        img {
                            width: .41rem;
                            height: .41rem;
                            margin-right: .34rem;
                        }
                        p{
                            font-size: .3rem;
                            color: #14baa6;
                        }
                    }
                }
                button{
                    border: none;
                    border-radius: .05rem;
                    width: 6.9rem;
                    height: .72rem;
                    line-height: .72rem;
                    background: #ff9d3c;
                    font-size: .3rem;
                    color: #fff;
                    position: absolute;
                    bottom: .1rem;
                    left: 50%;
                    transform: translateX(-50%);
                }
            }
        }
        .selIndex7{
            .purchase_notice1 {
                .content {
                    text-align: left;
                    background: #fff;
                    h6{
                        padding: .16rem .28rem;
                        background: #f8f8f8;
                        font-size: .25rem;
                        color: #8e8e8e;
                        font-weight: 400;
                    }           
                }
                footer{
                    padding: .38rem .26rem .1rem .26rem;
                    background: #f0f0f0;
                    button{
                        border: none;
                        border-radius: .05rem;
                        width: 6.9rem;
                        height: .72rem;
                        line-height: .72rem;
                        background: #ff9d3c;
                        font-size: .32rem;
                        color: #fff;                                
                    }
                }
                .all_types {
                    width: 7.5rem;
                    background: #fff;
                    text-align: left;           
                    .btn {
                        height: 1rem;
                        font-size: .3rem;
                        color: #22beac;
                        border-top: .16rem solid #909090;
                        text-align: center;
                        line-height: .84rem;
                    }
                }
                .all_times{
                    height: 4.8rem;
                    overflow: auto;
                }
            }
        }
    }
</style>